<template>
    <div class="headerBody">
        <div class="leftHeader">
          <a href="javascript:;" :title="'新盛合环保'" class="wechatCode">
            <span class="iconfont weixin headerLeftIcon"></span>
            <div class="headerLeftText">{{ t('message.entWX') }}

              <div class="codeShow">
                <img class="imgCode" :alt="'新盛合环保'+','+(leaders && leaders[0].name?leaders[0].name:'')" :src="codePath">
                <div class="imgText">{{ t('message.wxContact') }}</div>
              </div>
            </div>
            <span class="iconfont youxia downArrow"></span>
            
          </a>
            
        </div>
    
        <div class="middleHeader">
          <span class="iconfont dianhua phontIcon"></span>
          <a href="javascript:;" :alt="'新盛合环保'+','+(leaders && leaders[0].name?leaders[0].name:'')">
            <div class="phone">{{'0991-6232202'}}</div>
            <div class="desc">（{{t('message.serviceTime')}}：8:00~18:30）{{t('message.contactCS')}}</div>
          </a>
          <div class="btnBox">
            <el-button size="small" type="danger" class="btn">{{t('message.callRetention')}}</el-button>
          </div>
        </div>
        <div class="rightHeader">
            <div class="mainInfo">
              <span class="topTitle">{{'质量至上·诚信立业'}}</span>
              <el-button size="small" type="danger" class="btn">{{t('message.freeRegister')}}</el-button>
            </div>
    
            <div class="rightBox">
              <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-sub-menu index="1" class="noArrow">
                  <template #title><div class="iconfont ditu1 earthIcon"></div>{{ lang }}</template>
                  <el-menu-item index="Zh">中国站 Zh</el-menu-item>
                  <el-menu-item index="En">国际站 English</el-menu-item>
                </el-sub-menu>
                <!-- <el-sub-menu index="2" >
                  <template #title>
                    <div class="loginBox">
                      <div class="iconfont xinshenghelogo-1 logoIcon"></div>
                      <div class="loginInfo">{{ '登录' }}</div>
                    </div>
                  </template>
                  <el-menu-item index="logOut">{{'登出'}}</el-menu-item>
                </el-sub-menu> -->
              </el-menu>
              
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted,defineEmits } from 'vue'
import {fileTrans} from '@/utils/fileTrans.ts'
//引入缓存
import {localCache,sessionCache} from '@/utils/cache.ts'

//引入国际化
import { useI18n } from 'vue-i18n';
const {t}=useI18n()

const activeIndex = ref('Zh')
const lang=ref('Zh')
const $emit=defineEmits<{
  (e:string,lang:any):void
}>()

const leaders = [
    { name: '新盛合环保' }
]


const handleSelect = (key: any, keyPath: any) => {
    console.log(key, keyPath);
    lang.value=key
    
    console.log("activeIndex: ",activeIndex);
    $emit('langChange',key)
    
}

const codePath=fileTrans.getAsssetsFile('header/wechat-code-300-300.png')

// TODO 获取用户当前语言
onMounted(()=>{
  // TODO 获取用户当前语言
  lang.value=localCache.getCache('userLang') || 'Zh'
  activeIndex.value=lang.value
  $emit('langChange',lang.value)
})

</script>

<style lang="scss" scoped>
@import '../assets/sass/index.scss';
@import '@/assets/sass/common.scss';
//头部导航
.headerBody {
    width: 100%;
    display: flex;
    background-color: #ffffff;
    font-size: 16px;
    border-bottom: 1px solid #ccc;
    
    .wechatCode{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      &:hover .headerLeftIcon{
        transform: scale(1.3);
      }
      &:hover .headerLeftText{
        color: rgb(16, 84, 162);
      }
      &:hover .downArrow{
        color: rgb(16, 84, 162);
      }
      
    }
    .leftHeader {
        width: 20%;
        display: flex;
        padding: 10px 0;
        border-right: 1px solid #ccc;
        &:hover .codeShow{
        display: block;
        }
        .headerLeftIcon {
            margin-right: 10px;
            font-size: 20px;
            padding-top: 3px;
            color: rgb(30, 174, 29);
            transition: 1s;
            
        }
        .headerLeftText {
            margin-right: 10px;
            color: rgb(20, 108, 208);
            position: relative;
        }
        .downArrow {
          transform: rotate(45deg);
          margin-bottom: 5px;
          color: rgb(20, 108, 208);
        }
        .codeShow{
          display: none;
          position: absolute;
          /*top覆盖header的底部标签*/
          top: 32px;
          /*任意元素居中，默认50%*/
          left: 25px;
          transform: translateX(-45%);
          border: 1px solid #ccc;
          border-top: none;
          z-index: 999;
          background: white;
          &:hover{
            display: block;
          }
          .imgCode {
            width: 190px;
          }
          .imgText{
            width: 100%;
            align-items: center;
            text-align: center;
            margin-top: -10px;
            padding-bottom: 10px;
          }
        } 
    }
    .middleHeader {
        width: 45%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: 1px solid #ccc;
        transition: 1s;
        &:hover .phontIcon{
          transform: rotateX(360deg);
        }
        &:hover .phone{
          color: red;
        }
        .phontIcon{
          margin-right: 10px;
          font-size: 22px;
          padding-top: 3px;
          color: rgb(30, 174, 29);
          transition: 1s;
        }
        a{
          display: flex;
        }
        .phone{
          margin-top: 2px;
          color: rgb(20, 108, 208);
          font-size: 20px;
          font-weight: 700;
          display: inline-flex;
        }
        .desc{
          margin-top: 6px;
          color: rgb(20, 108, 208);
          display: inline-flex;
        }

        .btnBox{
          margin-left: 10px;
          .btn{
            animation: scaleBtn 1.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
            background-color:#e92322;
            &:hover{
              background-color:#f55268;
            }
          }
        }
    }
    .rightHeader {
        width: 35%;
        display: flex;
        .mainInfo {
          width: 60%;
          display: flex;
          align-items: center;
          justify-content: center;
          border-right: 1px solid #ccc;
          transition: 1s;
          .topTitle {
            cursor: pointer;
            display: inline-block;
            font: 14px/1.5 "PingFang SC", "微软雅黑", "Microsoft YaHei", Helvetica, "Helvetica Neue", Tahoma, Arial, sans-serif;
            font-style: italic;
            /*工业蓝：rgba(5,39,175,1)*/
            /*border-bottom: 1px solid #0a406f;*/
            /*font-weight: 700;*/
            /*font-size: 18px;*/
            /*color: #0d599a;*/
            /*text-shadow: 0px 1px 0px #b0d4f3, 0px 2px 0px #b0d4f3;*/
            border-bottom: 1px solid #e92322;
            font-weight: 700;
            font-size: 18px;
            color: #e92322;
            text-shadow: 0px 1px 0px #f6ee55, 0px 2px 0px #ffe889;
            margin-right: 20px;
            letter-spacing: 2px; /*字间距*/
          }
          .btn{
            background-color:#e92322;
            &:hover{
              background-color:#f55268;
            }
          }
          
        }
        .rightBox {
          width: 40%;
          display: flex;
          align-items: center;
          justify-content: left;
          transition: 1s;
          flex: 1;
          .loginBox{
            display: flex;
            align-items: center;
            .loginInfo{
              margin-left:5px;
            }
          }
          .noArrow{
            width: 25%;
            ::v-deep .el-icon{
              display: none;
            }
          }
          .earthIcon{
            font-size: 22px;
            color: $lightBlue;
            font-weight: 500;
            animation: rotate360 10s infinite linear;
            margin-right: 10px;
          }
          ::v-deep .el-menu{
            border-bottom:unset;
          }
          ::v-deep .el-menu--horizontal{
            height: 100%;
            width: 100%;
          }
          ::v-deep .el-sub-menu__title{
            line-height: unset;
            border-bottom:unset;
          }
          .logoIcon{
            width: 22px;
            height: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: $lightBlue;
            font-weight: 500;
            border: 1px solid $lightBlue;
            border-radius: 50%;
            margin:30px 0;
            display:block;
          }
        }
    }
}
</style>